<template>
	<view class="flex-col page">
		<view class="flex-col group_5">
			<view class="flex-col group_6">
				<view class="justify-center group_7">
					<image src="http://images.wanjunshijie.com/product/cook/assets/467c13be7e21b0c922c91d6e9306632b.png"
						class="image_6" />
					<text class="text_6">王师傅</text>
					<text class="text_7">20元/小时</text>
				</view>
				<view class="flex-col group_8">
					<view class="justify-between group_9">
						<view class="flex-row group_10">
							<image
								src="http://images.wanjunshijie.com/product/cook/assets/e417d37a6a42a0b153bd5fb9950b5dc8.png"
								class="image_8" />
							<text class="text_8">服务日期</text>
						</view>
						<view class="right-group view">
							<text class="text_9">请选择 </text>
							<text class="text_11">></text>
						</view>
					</view>
					<view class="justify-between group_11">
						<view class="flex-row group_12">
							<image src="../../assets/16419683213046935911.png" class="image_9" />
							<text class="text_13">用餐地点</text>
						</view>
						<view class="right-group view_1">
							<text class="text_9">请选择 </text>
							<text class="text_11">></text>
						</view>
					</view>
					<view class="justify-between group_13">
						<view class="flex-row group_14">
							<image
								src="http://images.wanjunshijie.com/product/cook/assets/0a03f67b4867eb0f37d6da9a5c4e0096.png"
								class="image_10" />
							<text class="text_16">服务小时</text>
						</view>
						<view class="flex-row section_1">
							<view class="flex-col items-end text-wrapper">
								<text class="text_17">-</text>
							</view>
							<text class="text_18">0</text>
							<view class="flex-col items-center text-wrapper_1">
								<text>+</text>
							</view>
						</view>
					</view>
					<view class="justify-between group_15">
						<view class="flex-row group_16">
							<image
								src="http://images.wanjunshijie.com/product/cook/assets/52858f313c25bbbfb316a3ded95e4b6f.png"
								class="image_11" />
							<text class="text_20">路程费用</text>
						</view>
						<text class="text_21">0</text>
					</view>
					<view class="flex-row group_17">
						<text class="text_22">其他备注</text>
						<text class="text_23">请填写您其他需求</text>
					</view>
				</view>
			</view>
			<view class="flex-col section_2">
				<view class="flex-col">
					<view class="flex-row group_19">
						<image
							src="http://images.wanjunshijie.com/product/cook/assets/102f3294ad7ff40dbf35689da8e485b7.png"
							class="image_6" />
						<text class="text_24">注意事项：</text>
					</view>
					<text class="text_25">1.本次服务仅提供厨师上门服务。</text>
					<text class="text_26">2.厨师上门服务不包含餐后打扫清洁工作。</text>
					<text class="text_27">3.厨师接单后会与你取得联系确认订单详情。</text>
					<text class="text_28">4.订单下单后2个小时内可无责取消。</text>
					<text class="text_29">5.5公里内免路程费，距离超过5公里的路程费2元/公里。</text>
				</view>
				<view class="justify-between section_3">
					<text class="text_30">￥20</text>
					<view class="flex-col items-center text-wrapper_2">
						<text>预约</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {};
		},
	};
</script>

<style scoped lang="scss">
	.page {
		background-color: rgb(255, 255, 255);
		width: 100%;
		height: 100%;
		overflow-y: auto;

		.group_5 {
			flex: 1 1 auto;
			overflow-y: auto;

			.group_6 {
				padding: 51rpx 11rpx 5rpx 24rpx;

				.group_7 {
					color: rgb(128, 125, 125);
					font-size: 28rpx;
					line-height: 27rpx;
					white-space: nowrap;

					.text_6 {
						margin-left: 21rpx;
					}

					.text_7 {
						margin-left: 12rpx;
					}
				}

				.group_8 {
					margin-top: 30rpx;

					.group_9 {
						padding: 37rpx 0 24rpx 2rpx;
						border-bottom: solid 2rpx rgb(238, 238, 238);

						.group_10 {
							color: rgb(0, 0, 0);
							font-size: 28rpx;
							line-height: 27rpx;
							white-space: nowrap;

							.image_8 {
								width: 40rpx;
								height: 38rpx;
							}

							.text_8 {
								margin: 5rpx 0 7rpx 20rpx;
							}
						}

						.view {
							margin: 7rpx 0 8rpx;
						}
					}

					.group_11 {
						padding: 28rpx 0 27rpx 3rpx;
						border-bottom: solid 2rpx rgb(238, 238, 238);

						.group_12 {
							color: rgb(0, 0, 0);
							font-size: 28rpx;
							line-height: 27rpx;
							white-space: nowrap;

							.image_9 {
								width: 37rpx;
								height: 44rpx;
							}

							.text_13 {
								margin-left: 22rpx;
								align-self: center;
							}
						}

						.view_1 {
							align-self: center;
						}
					}

					.group_13 {
						padding: 29rpx 0 26rpx;
						border-bottom: solid 2rpx rgb(238, 238, 238);

						.group_14 {
							color: rgb(0, 0, 0);
							font-size: 28rpx;
							line-height: 27rpx;
							white-space: nowrap;

							.image_10 {
								width: 44rpx;
								height: 43rpx;
							}

							.text_16 {
								margin: 8rpx 0 9rpx 18rpx;
							}
						}

						.section_1 {
							margin-right: 11rpx;
							color: rgb(0, 0, 0);
							font-size: 24rpx;
							line-height: 24rpx;
							white-space: nowrap;
							border-radius: 10rpx;
							height: 43rpx;
							border: solid 2rpx rgb(220, 220, 220);

							.text-wrapper {
								padding-top: 18rpx;
								background-color: rgb(238, 238, 238);
								border-radius: 10rpx 0px 0px 10rpx;
								width: 47rpx;
								height: 43rpx;
								border: solid 2rpx rgb(220, 220, 220);

								.text_17 {
									margin-right: 3rpx;
								}
							}

							.text_18 {
								margin: 10rpx 0 5rpx 32rpx;
							}

							.text-wrapper_1 {
								margin-left: 17rpx;
								padding: 13rpx 0 2rpx;
								background-color: rgb(238, 238, 238);
								border-radius: 0px 10rpx 10rpx 0px;
								width: 47rpx;
								height: 43rpx;
								border: solid 2rpx rgb(220, 220, 220);
							}
						}
					}

					.group_15 {
						padding: 31rpx 0 26rpx;
						border-bottom: solid 2rpx rgb(238, 238, 238);

						.group_16 {
							color: rgb(0, 0, 0);
							font-size: 28rpx;
							line-height: 27rpx;
							white-space: nowrap;

							.image_11 {
								width: 42rpx;
								height: 42rpx;
							}

							.text_20 {
								margin: 7rpx 0 9rpx 19rpx;
							}
						}

						.text_21 {
							align-self: center;
							color: rgb(182, 180, 180);
							font-size: 24rpx;
							line-height: 24rpx;
							white-space: nowrap;
						}
					}

					.group_17 {
						padding: 39rpx 0 34rpx;

						.text_22 {
							color: rgb(0, 0, 0);
							font-size: 28rpx;
							line-height: 27rpx;
							white-space: nowrap;
						}

						.text_23 {
							margin-left: 47rpx;
							color: rgb(182, 180, 180);
							font-size: 24rpx;
							line-height: 24rpx;
							white-space: nowrap;
						}
					}

					.right-group {
						line-height: 24rpx;
						white-space: nowrap;
						height: 23rpx;

						.text_9 {
							color: rgb(182, 180, 180);
							font-size: 24rpx;
							line-height: 24rpx;
						}

						.text_11 {
							color: rgb(182, 180, 180);
							font-size: 24rpx;
							line-height: 20rpx;
						}
					}
				}
			}

			.section_2 {
				padding: 41rpx 21rpx 21rpx;
				background-color: rgb(242, 242, 242);

				.section_3 {
					margin-top: 126rpx;
					padding: 8rpx 12rpx 7rpx;
					background-color: rgb(255, 255, 255);
					border-radius: 10rpx;

					.text_30 {
						align-self: center;
						color: rgb(255, 1, 1);
						font-size: 32rpx;
						line-height: 26rpx;
						white-space: nowrap;
					}

					.text-wrapper_2 {
						padding: 17rpx 0 16rpx;
						color: rgb(250, 250, 250);
						font-size: 30rpx;
						line-height: 28rpx;
						white-space: nowrap;
						background-color: rgb(56, 148, 255);
						border-radius: 31rpx;
						width: 158rpx;
						height: 61rpx;
					}
				}

				.group_19 {
					color: rgb(172, 170, 170);
					font-size: 28rpx;
					line-height: 27rpx;
					white-space: nowrap;

					.text_24 {
						margin-left: 16rpx;
					}
				}

				.text_25 {
					margin-left: 4rpx;
					margin-top: 42rpx;
					color: rgb(172, 170, 170);
					font-size: 24rpx;
					line-height: 23rpx;
					white-space: nowrap;
				}

				.text_26 {
					margin-left: 3rpx;
					margin-top: 24rpx;
					color: rgb(172, 170, 170);
					font-size: 24rpx;
					line-height: 23rpx;
					white-space: nowrap;
				}

				.text_27 {
					margin-left: 3rpx;
					margin-top: 24rpx;
					color: rgb(172, 170, 170);
					font-size: 24rpx;
					line-height: 23rpx;
					white-space: nowrap;
				}

				.text_28 {
					margin-top: 24rpx;
					color: rgb(172, 170, 170);
					font-size: 24rpx;
					line-height: 23rpx;
					white-space: nowrap;
				}

				.text_29 {
					margin-left: 3rpx;
					margin-top: 24rpx;
					color: rgb(172, 170, 170);
					font-size: 24rpx;
					line-height: 24rpx;
					white-space: nowrap;
				}
			}

			.image_6 {
				width: 27rpx;
				height: 25rpx;
			}
		}
	}
</style>
